<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: html(~{::title}, ~{::pageStyles}, '系统设置', ~{::#settings-content}, ~{::pageScripts})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗诊断助手 - 系统设置</title>
    
    <!-- 页面特定CSS -->
    <th:block th:fragment="pageStyles">
        <link rel="stylesheet" th:href="@{/css/pages/settings.css}">
    </th:block>
</head>
<body>
    <!-- 系统设置内容 -->
    <div id="settings-content">
        <!-- 设置选项卡导航 -->
        <div class="settings-tabs">
            <div class="tab-nav">
                <button class="tab-button active" data-target="general">通用设置</button>
                <button class="tab-button" data-target="security">安全设置</button>
                <button class="tab-button" data-target="backup">备份与恢复</button>
                <button class="tab-button" data-target="permissions">权限管理</button>
                <button class="tab-button" data-target="logs">系统日志</button>
            </div>
            
            <!-- 通用设置选项卡 -->
            <div class="tab-content active" id="general">
                <div class="settings-card">
                    <h2 class="settings-title">通用设置</h2>
                    <form id="generalSettingsForm" class="settings-form">
                        <div class="form-group">
                            <label for="systemName">系统名称</label>
                            <input type="text" id="systemName" name="systemName" class="form-control" placeholder="请输入系统名称">
                        </div>
                        
                        <div class="form-group">
                            <label for="logoFile">系统Logo</label>
                            <div class="file-upload">
                                <div class="file-preview" id="logoPreview">
                                    <span data-icon="image"></span>
                                    <span class="file-name">未选择文件</span>
                                </div>
                                <label for="logoFile" class="file-upload-btn">选择文件</label>
                                <input type="file" id="logoFile" name="logoFile" accept="image/*" hidden>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="allowedFileTypes">允许的文件类型</label>
                            <input type="text" id="allowedFileTypes" name="allowedFileTypes" class="form-control" placeholder="输入允许的文件扩展名，如: jpg,jpeg,png,pdf">
                            <small class="form-text">多个文件类型以逗号分隔</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="maxFileSize">最大文件大小 (MB)</label>
                            <input type="number" id="maxFileSize" name="maxFileSize" class="form-control" placeholder="输入允许的最大文件大小">
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">保存设置</button>
                            <button type="reset" class="btn btn-secondary">重置</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 安全设置选项卡 -->
            <div class="tab-content" id="security">
                <div class="settings-card">
                    <h2 class="settings-title">安全设置</h2>
                    <form id="securitySettingsForm" class="settings-form">
                        <div class="form-group">
                            <label for="passwordExpireDays">密码过期时间（天）</label>
                            <input type="number" id="passwordExpireDays" name="passwordExpireDays" class="form-control" placeholder="输入密码过期天数">
                            <small class="form-text">设置为0表示密码永不过期</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="maxLoginAttempts">最大登录尝试次数</label>
                            <input type="number" id="maxLoginAttempts" name="maxLoginAttempts" class="form-control" placeholder="输入最大登录尝试次数">
                            <small class="form-text">超过此次数账户将被锁定</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="sessionTimeoutMinutes">会话超时时间（分钟）</label>
                            <input type="number" id="sessionTimeoutMinutes" name="sessionTimeoutMinutes" class="form-control" placeholder="输入会话超时时间">
                        </div>
                        
                        <div class="form-group">
                            <label>密码复杂度要求</label>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="requireUppercase" name="requireUppercase">
                                    <label for="requireUppercase">必须包含大写字母</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="requireLowercase" name="requireLowercase">
                                    <label for="requireLowercase">必须包含小写字母</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="requireNumbers" name="requireNumbers">
                                    <label for="requireNumbers">必须包含数字</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="requireSpecialChars" name="requireSpecialChars">
                                    <label for="requireSpecialChars">必须包含特殊字符</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="minPasswordLength">最小密码长度</label>
                            <input type="number" id="minPasswordLength" name="minPasswordLength" class="form-control" placeholder="输入最小密码长度">
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">保存设置</button>
                            <button type="reset" class="btn btn-secondary">重置</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 备份与恢复选项卡 -->
            <div class="tab-content" id="backup">
                <div class="settings-card">
                    <h2 class="settings-title">备份与恢复</h2>
                    
                    <div class="backup-actions">
                        <button id="createBackupBtn" class="btn btn-primary">
                            <span data-icon="backup"></span> 创建备份
                        </button>
                    </div>
                    
                    <div class="backup-history">
                        <h3>备份历史</h3>
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>备份ID</th>
                                        <th>创建时间</th>
                                        <th>文件大小</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="backupList">
                                    <!-- 备份列表将通过JavaScript动态加载 -->
                                    <tr class="placeholder-row">
                                        <td colspan="4">加载中...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 权限管理选项卡 -->
            <div class="tab-content" id="permissions">
                <div class="settings-card">
                    <h2 class="settings-title">角色与权限管理</h2>
                    
                    <div class="roles-container">
                        <div class="roles-list">
                            <h3>系统角色</h3>
                            <ul id="rolesList" class="sidebar-like-list">
                                <!-- 角色列表将通过JavaScript动态加载 -->
                                <li class="active">管理员</li>
                                <li>医生</li>
                                <li>护士</li>
                                <li>患者</li>
                            </ul>
                            <button id="addRoleBtn" class="btn btn-sm btn-outline">
                                <span data-icon="add"></span> 添加角色
                            </button>
                        </div>
                        
                        <div class="role-permissions">
                            <div class="role-header">
                                <h3>角色权限: <span id="currentRoleName">管理员</span></h3>
                                <div class="role-actions">
                                    <button id="editRoleBtn" class="btn btn-sm btn-outline">
                                        <span data-icon="edit"></span> 编辑
                                    </button>
                                    <button id="deleteRoleBtn" class="btn btn-sm btn-danger">
                                        <span data-icon="delete"></span> 删除
                                    </button>
                                </div>
                            </div>
                            
                            <div class="permissions-list">
                                <h4>已分配权限</h4>
                                <div class="checkbox-group" id="permissionsList">
                                    <!-- 权限列表将通过JavaScript动态加载 -->
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="perm1" checked disabled>
                                        <label for="perm1">用户管理</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="perm2" checked disabled>
                                        <label for="perm2">角色管理</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="perm3" checked disabled>
                                        <label for="perm3">系统配置</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统日志选项卡 -->
            <div class="tab-content" id="logs">
                <div class="settings-card">
                    <h2 class="settings-title">系统日志</h2>
                    
                    <div class="logs-filter">
                        <form id="logsFilterForm" class="filter-form">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="startDate">开始日期</label>
                                    <input type="date" id="startDate" name="startDate" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="endDate">结束日期</label>
                                    <input type="date" id="endDate" name="endDate" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="username">用户名</label>
                                    <input type="text" id="username" name="username" class="form-control" placeholder="按用户名筛选">
                                </div>
                                <div class="form-group">
                                    <label for="operation">操作类型</label>
                                    <select id="operation" name="operation" class="form-control">
                                        <option value="">全部</option>
                                        <option value="USER_CREATE">创建用户</option>
                                        <option value="USER_UPDATE">更新用户</option>
                                        <option value="USER_DELETE">删除用户</option>
                                        <option value="LOGIN">用户登录</option>
                                        <option value="LOGOUT">用户登出</option>
                                        <option value="PRESCRIPTION_CREATE">创建处方</option>
                                        <option value="PATIENT_CREATE">创建患者</option>
                                        <option value="SYSTEM_CONFIG">系统配置</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">查询</button>
                                    <button type="reset" class="btn btn-secondary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    
                    <div class="logs-table">
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>用户名</th>
                                        <th>操作类型</th>
                                        <th>描述</th>
                                        <th>IP地址</th>
                                        <th>时间</th>
                                    </tr>
                                </thead>
                                <tbody id="logsList">
                                    <!-- 日志列表将通过JavaScript动态加载 -->
                                    <tr class="placeholder-row">
                                        <td colspan="6">加载中...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="pagination" id="logsPagination">
                            <!-- 分页控件将通过JavaScript动态加载 -->
                            <button class="page-btn" disabled>上一页</button>
                            <span class="page-info">第1页，共10页</span>
                            <button class="page-btn">下一页</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面特定脚本 -->
    <th:block th:fragment="pageScripts">
        <script th:src="@{/js/pages/settings.js}"></script>
    </th:block>
</body>
</html>